<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2021-11-03 11:58:01
 * @LastEditors: xuzp4
 * @LastEditTime: 2021-11-03 14:27:21
 * @FilePath: \vue_demo\src\view\qiepian\index.vue
--><!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2021-10-25 13:39:44
 * @LastEditors: xuzp4
 * @LastEditTime: 2021-10-25 14:23:40
 * @FilePath: \vue_demo\src\view\lixian\index.vue
-->
<template>
  <div id="map"></div>
</template>

<script>
import mapboxgl from "mapbox-gl";
import tj from "togeojson";
import $ from "jquery";
export default {
  mounted() {
    mapboxgl.accessToken =
      "pk.eyJ1IjoieHUwNDMwIiwiYSI6ImNrcHMzeGNhbDAzcHoyb280cmM1MGEzYXYifQ.uZFE2jGWs46691vFMwQLPA";
    var map = new mapboxgl.Map({
      container: "map", // container id
      style: "mapbox://styles/xu0430/ckqg0r0ng1kk217o6h54ontd1",
      zoom: 15,
      minZoom: 9,
      maxZoom: 19,
      center: [110.308, 39.245],
      doubleClickZoom: false,
      dragRotate: false,
    });
    map.on("load", () => {
      $.ajax(
        "http://localhost:8080/static/google_tiles/19/423059/324681.kml"
      ).done(function (xml) {
          console.log('xml',xml)
        console.log(tj.kml(xml));
        let geoData = tj.kml(xml)
        map.addLayer({
            id:'huashun',
            type:'fill',
            source:{
                type:'geojson',
                data:geoData
            }
        })
      });
    });
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>
